<template>
	<view class="box">
		<view class="margin"></view>
		<view class="address_box">
			<view class="person">
				<view class="preson_tip">
					联系人
				</view>
				<view class="inp1">
					<input type="text" v-model="addresslist.person" placeholder="请填写收货人姓名"/>
				</view>
			</view>
			<view class="gender person">
				<view class="gender_tip1 preson_tip">
					性别
				</view>
				<view class="gender_tip1">
					<radio-group name="" @change="radioChecked">
						<label>
							<radio value="男" name="sex" checked="true"/><text>男</text>
						</label>
						<label>
							<radio value="女" name="sex" /><text>女</text>
						</label>
					</radio-group>
				</view>
			</view>
		
		
			<view class="phone person">
				<view class="preson_tip">
					电话
				</view>
				<view class="inp1">
					<input type="text" v-model="addresslist.phone" placeholder="请输入联系人电话"/>
				</view>
			</view>
		
			<view class="city" @tap="cityChecked">
				<view class="city_tip1">
					地区
				</view>
				<view class="city_tip2">
					<view class="p1">
						<view class="text">
							{{city}}
						</view>
						<view class="i1">
							<van-icon name="arrow" />
						</view>
					</view>
				</view>
			</view>
		
			<view class="phone person">
				<view class="preson_tip">
					详细地址
				</view>
				<view class="inp1">
					<input type="text" v-model="addresslist.address" placeholder="输入详细地址"/>
				</view>
			</view>
		
			<view class="default">
				<view class="default_tip">
					默认地址
				</view>
				<view class="default_tip">
					<checkbox-group name="" @change="defaulthandle">
						<label>
							<checkbox :value="defaultChecked" /><text></text>
						</label>
					</checkbox-group>
					
				</view>
			</view>
		
		</view>
		
		
		<view class="city_checked" v-show="checked">
			<van-area @confirm="changeAddr" :area-list="areaList" />
		</view>
		
		<view class="save" @tap="addressSave">
			<view class="but">
				<text>保存地址</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { areaList } from '@vant/area-data';
	let time
	export default {
		data() {
			return {
				areaList,
				checked: false,
				city: '请选择地区',
				addressData: [{
					person: '1',
					gender:'男',
					phone: '',
					city: '',
					address: '',
					defaultChecked: '0'
				}]
			}
		},
		mounted() {
			
		},
		watch: {
			addressData(){
				console.log(this.addressData)
			}
		},
		methods: {
			cityChecked(){
				this.checked = true
			},
			//地区选择点击确定触发,拿到数据
			changeAddr(e){
				let city = ''
				this.checked = false
				let arr = e.detail.values
				console.log(arr)
				for(let index in arr){
					city+=' '+arr[index].name
				} 
				this.addressData[0].city = city
				this.city = city
			},
			//性别选择
			radioChecked(e){
				console.log(e.detail.value,1111111111)
				this.addressData[0].gender = e.detail.value
			},
			//是否勾选默认地址
			defaulthandle(e){
				this.defaultChecked = !this.defaultChecked
				console.log(e.detail.value,22222222)
				if(e.detail.value.length != 0){
					this.addressData[0].defaultChecked = "1"
				}else{
					this.addressData[0].defaultChecked = "0"
				}
			},
			//数据提交
			addressSave(){
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				//防抖处理
				let that = this
				clearTimeout(time)
				time = setTimeout(function(){
					//判断数据是否都填写
					let status = true
					for(let key in this.addresslist){
						console.log(key)
						if(this.addresslist[key] == ''){
							console.log(key,123)
							status = false
							break;
						}
						
					}
					if(status){
						//发送数据到服务器
						let data = that.addresslist
						that.db('address').add({
							data
						})
						.then((data) =>{
							console.log(data)
							uni.hideLoading()
							uni.showToast({
								title: '添加成功!',
								duration: 1000 //持续时间为 2秒
							})
						})
						.catch((err) =>{
							uni.hideLoading()
							uni.showToast({
								title: '添加失败,服务器异常!',
								duration: 1000 //持续时间为 2秒
							})
						})
					}else{
						console.log("no")
					}
				},500)
			}
		},
		computed: {
			addresslist(){
			   return this.addressData[0]
			}
		}
	}
</script>


<style scoped>
	.city_checked{
		width: ;
	}
</style>

<style scoped>
	.box{
		width: 100%;
		height: 100%;
		color: #565656;
		font-size: 0.8rem;
		overflow: hidden;
	}
	.box .margin{
		width: 100%;
		height: 15rpx;
		background-color: #f1f1f2;
	}
	.save{
		width: 100%;
		height: 100%;
		background-color: #f1f1f2;
	}
	.address_box {
		width: 90%;
		height: auto;
		background-color: #f1f1f2;
		margin:auto;
	}

	.address_box>view {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		margin-bottom: 1rpx;
	}

	.person .preson_tip {
		width: 20%;
		line-height: 100rpx;
		float: left;
	}

	.person input {
		width: 500rpx;
		height: 100rpx;
		float: left;

	}
	
	
	
	.gender > view{
		line-height: 100rpx;
		float: left;
	}
	.gender .gender_tip1{
		color: #565656;
	}
	.gender .gender_tip1 radio{
		transform: scale(0.7);
	}
	
	
	
	.city .city_tip1{
		width: 20%;
		line-height: 100rpx;
		float: left;
	}
	.city .city_tip2{
		width: 80%;
		line-height: 100rpx;
		float: left;
	}
	.city .city_tip2 .p1{
		width: 100%;
		line-height: 100rpx;
		text-align: left;
		background-color: #007AFF;
	}
	.city .city_tip2 .text{
		float: left;
	}
	.city .city_tip2 .i1{
		float: right;
	}
	/* .city .city_tip2 .i1{
		width: 50%;
		line-height: 100rpx;
		float: left;
	} */
	.default > view{
		width: 20%;
		line-height: 100rpx;
		float: left;
	}
	.default checkbox{
		transform: scale(0.7);
	}
	.save .but{
		width: 100%;
		height: 150rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.but text{
		width: 90%;
		line-height: 90rpx;
		display: block;
		text-align: center;
		background-color: #007860;
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 1rem;
		position: absolute;
		top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
</style>
